<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>huohuaqi首页</title>
    <link href="./css/bootstrap5.3.min.css" rel="stylesheet">
</head>
<body>

    <div class="container" id="index-div">
        <!--        header 头部导航栏-->
        <div id="my_header">      </div>

<!--        正文-->
        <h1 class="row col-lg-12">huohuaqi 服务器运行成功！</h1>
            
        <div class="row">
            <h5 class="col-lg-7 col-sm-12">选择一个应用</h5>
            <div class="row background1 col-lg-7 col-sm-12">  
                <div class="marginTop20px" v-for="(item,idx) in data_list" :key="idx">
                    <a class="btn btn-primary" :href="item[1]">{{item[0]}}</a>
                </div>
            </div>
        </div>
       
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        $("#my_header").load("index_header.html");
    });

    var app = new Vue({
        el: "#index-div",
        data() {
            return {
                data_list: [
                    ['简单邮箱系统', 'wechart/chart.html'],
                    ['在线云盘', 'explorer/fileExplorer.html'],
                    ['文件临时存取', 'index_tmp_files.html'],
                    ['网站收藏夹', 'star.html'],
                    ['语音聊天室', 'webchart/index.html'],
                    ['华南理工申请外出mypass', 'others/apply.html'],
                    ['在线多人可复现随机排序', 'random.html'],
                    ['每日账本', 'DailyBill/dailybiil.html'],
                ]
            };
        },
        methods: {

        }
    });
</script>
<style>
    .marginTop20px{
        width: auto;
        margin-top: 10px;
        float: left;
    }
    .background1{
        background-color: #d4cfbf;
        border-radius: 10px;
        padding: 10px 5px;
        margin-top: 10px;
    }
</style>


</html>